<!--
 * @Author: your name
 * @Date: 2019-11-08 17:11:07
 * @LastEditTime: 2019-12-17 00:39:48
 * @LastEditors: YJP
 * @Description: In User Settings Edit
 * @FilePath: \vue_et\src\App.vue
 -->
<template>
  <div id="app">
    <transition :name="RouterAnimation">
      <keep-alive :include="KeepView">
        <router-view /> 
      </keep-alive>
    </transition>
  </div>
</template>
<script>
export default {
  name:"App",
  data(){
    return{
      RouterAnimation:'slideleft',//默认滑动效果
      KeepView:['login'],//缓存组件
      mainPage:[
        '/',
        '/chat',
        '/map',
        '/add',
        '/music',
        '/active',
      ],//主导航页面之间的切换动画fade
    }
  },
  watch:{
    '$route'(next,prev){
      // 如果主导航页面之间的切换，则fade
      if(this.mainPage.indexOf(prev.fullPath) > -1 && this.mainPage.indexOf(next.fullPath) > -1){
        this.RouterAnimation = 'fade';
      }
      // 如果之前的页面是主页面，或'/'则left,不是则right
      else if(this.mainPage.indexOf(prev.fullPath) > -1){
        this.RouterAnimation = 'slideleft';
      }
      // 其他 如果下一个页面是主页面则向右，否则渐隐渐显
      else if(this.mainPage.indexOf(next.fullPath) > -1){
        this.RouterAnimation = 'slideright';
      }
      // 二级页面
      else{
        this.RouterAnimation = 'fade';
      }
    }

  }
}
</script>
<style lang="less">
@import url('./assets/css/theme.less');
html,body,#app {
  height: 100%;
  font-size: 24px;
}

</style>
